import React, { Component } from "react";
// import React, { PureComponent } from "react";
// 生命周期只有类组件有,函数组件是没有生命周期的
import Child from "./Child";

class App extends Component {
  // 初始化阶段
  // constructor就是组件的初始化阶段的生命周期
  // constructor在组件被实例化的时候就自动执行的，最先执行，只执行一次
  constructor(props) {
    super(props);

    this.state = {
      // count: props.count,
      count: 10,
      arr: [1, 2, 3, 4, 5, 6, 7],
    };
    // this.file = createRef();
    // this.fn = this.fn.bind(this);
  }

  // 挂载阶段
  // componentWillMount已经被废弃了，改名了
  // 挂载前
  // 不要做数据请求,因为fiber算法,这个生命周期，有可能会被执行多次
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
    // this.setState({
    //   count: 20,
    // });
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     console.log(res);
    //   });
  }

  // render也是生命周期,一定要return，jsx
  render() {
    console.log("render");
    // 不要做数据请求,因为fiber算法,这个生命周期，有可能会被执行多次
    // 解构
    const { count, arr } = this.state;
    const oddArr = arr.filter((item) => item % 2);
    return (
      <>
        <h2>老版生命周期</h2>
        <p>count: {count}</p>
        {oddArr.map((item) => {
          return <p key={item}>{item}</p>;
        })}
        <Child count={this.state.count} />
      </>
    );
  }

  // 挂载结束
  // 什么都可以做了,包括数据请求(fiber已经结束了)
  componentDidMount() {
    console.log("componentDidMount");
    setTimeout(() => {
      this.setState({
        count: 10,
      });
    }, 2000);
  }

  // 更新阶段
  // shouldComponentUpdate返回一个布尔值，如果是true，页面会更新，是false，页面不会更新
  // 可以接受两个参数，prevProps, prevState
  // 性能优化
  shouldComponentUpdate(prevProps, prevState) {
    console.log("shouldComponentUpdate");
    // return true;
    // if (prevState.count === this.state.count) {
    //   return false;
    // } else {
    //   return true;
    // }
    return prevState.count !== this.state.count;
  }

  // 更新前
  // componentWillUpdate也被废弃了
  UNSAFE_componentWillUpdate() {
    console.log("componentWillUpdate");
  }

  // 更新后
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }
}

// new App({a: 3})
// <App a="3" />

export default App;
